<template>
        <div>
          <!-- item.disabled 是否禁用按钮 灰色显示 -->
          <div v-for="(item) of data" :key = "item.id"
          @click="handerClick(item,$event.target)"
          
          :class="['list-item', item.disabled ? 'disabled' : '']"
          >
          <!-- 复选框 -->
          <input type="checkbox" name="item.name" id="item.id" :disabled="item.disabled">
         <!-- 文本 -->
          <label :for="'__checkbox__' + item.id">{{ item.name }}</label>
        </div>
                
        </div>
</template>
<script setup lang="ts">
import {reactive} from 'vue'
const {data, leftOrRight} = defineProps({
  data:{
    type:Array,
    default:[]
  },
  leftOrRight:{
    type:String,
  }
})


 const emit =  defineEmits(['checkBoxClik']);
// 点击触发
 const handerClick = (item,event)=>{
  // 给父组件发消息
  // leftOrRight left:操作左侧数据 right:操作右侧数据
  // item 当前点击节点数据
  // leftOrRight 是否选种
    emit('checkBoxClik',leftOrRight, item, event.checked)
 }

</script>
<style lang="scss" scoped>
.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 20px;
  font-size: 12px;
  color: #666;

  &.disabled {
    opacity: 0.6;
  }
}
</style>